<#include "/layout/header.ftl"/>
<div class="">
    <div class="clearfix"></div>
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <ol class="breadcrumb">
                <li><a href="/">首页</a></li>
                <li class="active">说说类别管理</li>

            </ol>
            <div class="x_panel">
                <div class="x_content">
                    <div class="<#--table-responsive-->">
                        <div class="btn-group hidden-xs" id="toolbar">
                        <#--<@shiro.hasPermission name="tag:add">-->
                            <button id="btn_add" type="button" class="btn btn-default" title="新增类别">
                                <i class="fa fa-plus"></i> 新增类别
                            </button>
                        <#--</@shiro.hasPermission>-->
                        <#--<@shiro.hasPermission name="tag:batchDelete">-->
                            <button id="btn_delete_ids" type="button" class="btn btn-default" title="删除选中">
                                <i class="fa fa-trash-o"></i> 批量删除
                            </button>
                        <#--</@shiro.hasPermission>-->
                        </div>
                        <table id="tablelist">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<#include "/layout/footer.ftl"/>
<!--添加弹框-->
<div class="modal fade" id="addOrUpdateModal" tabindex="-1" role="dialog" aria-labelledby="addroleLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="addroleLabel">添加类别</h4>
            </div>
            <div class="modal-body">
                <form id="addOrUpdateForm" class="form-horizontal form-label-left" novalidate>
                    <input type="hidden" name="id">
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">名称: <span class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" name="name" id="name" required="required" placeholder="请输入类别名称"/>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="description">类别描述: </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" id="description" name="description" placeholder="请输入类别描述"/>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="sort">排序: </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" id="sort" name="sort" required="required" placeholder="请输入类别排序序号"/>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="icon">图标: </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" id="icon" name="icon" required="required" placeholder="请输入icon"/>
                            <br /><a href="http://www.fontawesome.com.cn/icons-ui/" target="_blank">请点击我，选择图标</a>
                            <br />将图标英文名字复制到上方输入框即可
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="available">是否可用: </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <span style="display: inline-block;margin-top: 0.8em; ">
                                <input type="radio" checked="checked" class="form-control col-md-7 col-xs-12" id="available1" name="available" value="1" /> 可用 &emsp;
                                <input type="radio" class="form-control col-md-7 col-xs-12" id="available" name="available" value="2" /> 不可用
                            </span>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary addOrUpdateBtn">保存</button>
            </div>
        </div>
    </div>
</div>
<!--/添加弹框-->
<script>
    /**
     * 操作按钮
     * @param code
     * @param row
     * @param index
     * @returns {string}
     */
    function operateFormatter(code, row, index) {
        var trId = row.id;
        var operateBtn = [
        <#--'<@shiro.hasPermission name="tag:edit"><a class="btn btn-xs btn-primary btn-update" data-id="' + trId + '"><i class="fa fa-edit"></i>编辑</a></@shiro.hasPermission>',-->
        <#--'<@shiro.hasPermission name="tag:delete"><a class="btn btn-xs btn-danger btn-remove" data-id="' + trId + '"><i class="fa fa-trash-o"></i>删除</a></@shiro.hasPermission>'-->
            '<a class="btn btn-xs btn-primary btn-update" data-id="' + trId + '"><i class="fa fa-edit"></i> 编辑</a>',
            '<a class="btn btn-xs btn-danger btn-remove" data-id="' + trId + '"><i class="fa fa-trash-o"></i> 删除</a>'

        ];
        return operateBtn.join('');
    }

    $(function () {
        var options = {
            modalName: "说说类别",
            url: "/Smalltalktypes/list",
            getInfoUrl: "/Smalltalktypes/get/{id}",
            updateUrl: "/Smalltalktypes/edit",
            removeUrl: "/Smalltalktypes/remove",
            createUrl: "/Smalltalktypes/add",
            columns: [
                {
                    checkbox: true
                }, {
                    field: 'id',
                    title: 'ID',
                    width: '60px',
                    editable: false
                }, {
                    field: 'name',
                    title: '名称',
                    width: '150px',
                    editable: false,
                    formatter: function (code, row, index) {
                        var id = row.id;
                        return '<a href="' + appConfig.wwwPath + '/Smalltalktypes/get/' + id + '" target="_blank">' + row.name + '</a>';
                    }
                }, {
                    field: 'description',
                    title: '描述',
                    editable: false
                }, {
                    field: 'sort',
                    title: '排序',
                    editable: false
                }, {
                    field: 'icon',
                    title: '图标',
                    editable: false,
                    formatter: function (code, row, index) {
                        var cs = row.icon; // '/assets/img_smalltalktype_icon/1.ico';
                        return '<i class="fa '+ cs +'" style="font-size: 1.5em;"></i>';
                    }
                }, {
                    field: 'available',
                    title: '是否可用',
                    editable: false,
                    formatter: function (code, row, index) {
                        return row.available == '1' ? '可用' : '不可用';
                    }
                }, {
                    field: 'operate',
                    title: '操作',
                    width: '150px',
                    formatter: operateFormatter //自定义方法，添加操作按钮
                }
            ]
        };
        //1.初始化Table
        $.tableUtil.init(options);
        //2.初始化Button的点击事件
        $.buttonUtil.init(options);
    });
</script>